<template>
	<!--pages/serviceDrawInfo/serviceDrawInfo.wxml-->
	<view class="container" v-if="info">
		<view class="top">
			<image class="top-icon" :src="statusArr[status].icon"></image>
			<text class="top-txt">{{statusArr[status].statusTitle}}</text>
		</view>
		<view class="main">
			<view class="main-title">{{info.order_type == 2?"退款信息":"换货信息"}}</view>
			<view class="good" v-for="(item, index) in info.sell_info" :key="index">
				<image class="good-img" :src="item.goods_img"></image>
				<view class="good-right">
					<view class="good-right-name">{{item.goods_name}}</view>
					<view class="good-right-sku">{{item.sku_json_info.name?item.sku_json_info.name:''}}</view>
					<view class="good-right-price">￥{{item.price}}</view>
					<view class="good-num" style="font-size:24rpx;color:#A4A4A4">
						x{{item.num}}
					</view>
				</view>
			</view>
			<view class="main-info">
				<view class="info-list">
					<view class="info-title">订单号：</view>
					<view class="info-detail">{{info.order_no}}</view>
				</view>
				<view class="info-list">
					<view class="info-title">申请时间：</view>
					<view class="info-detail">{{info.add_time}}</view>
				</view>
				<view class="info-list" v-if="info.order_type == 2 && info.delivery_fee">
					<view class="info-title">配送金额：</view>
					<view class="info-detail">￥{{info.delivery_fee}}</view>
				</view>
				<view class="info-list" v-if="info.order_type == 2 && info.all_money">
					<view class="info-title">退款金额：</view>
					<view class="info-detail">￥{{info.all_money}}</view>
				</view>
				<view class="info-list" v-if="status == 3">
					<view class="info-title">驳回原因：</view>
					<view class="info-detail">{{info.reason_info.reject_reason}}</view>
				</view>
				<view class="info-list">
					<view class="info-title">申请原因：</view>
					<view class="info-detail">{{info.reason_info.apply_reason}}</view>
				</view>
				<view class="info-list" v-if="info.order_type == 3">
					<view class="info-title">换货地址：</view>
					<view class="info-detail">
						<text class="main-info-name">{{info.user_name}}</text>
						<text>{{info.user_phone}}</text>
						<view>{{info.user_address}}</view>
					</view>
				</view>
				<view class="info-list" v-if="info.reason_info.img_path && info.reason_info.img_path.length != 0">
					<view class="info-title">申请图片：</view>
					<view class="info-detail" v-for="(imgItem, unique) in info.reason_info.img_path" :key="unique">
						<image @tap="seeBig" :data-index="index" class="reason-img" :src="imgItem"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btn">提交</view> -->
	</view>
</template>

<script>
	// pages/serviceDrawInfo/serviceDrawInfo.js
	const app = getApp().globalData;
	export default {
		data() {
			return {
				statusArr: [],
				info: "",
				status: ""
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			
			this.statusArr = [{}, {
				icon: "/static/images/wait.png",
				statusTitle: "申请中"
			}, {
				icon: "/static/images/serviceWarn.png",
				statusTitle: "已撤销申请"
			}, {
				icon: "/static/images/serviceWarn.png",
				statusTitle: "申请被驳回"
			}, {
				icon: this.$store.image_header + "serviceSuc.png",
				statusTitle: "申请成功"
			}, {
				icon: this.$store.image_header + "serviceSuc.png",
				statusTitle: "换货成功"
			}, {
				icon: "/static/images/wait.png",
				statusTitle: "退款中"
			}, {
				icon: this.$store.image_header + "serviceSuc.png",
				statusTitle: "退款成功"
			}, {
				icon: "/static/images/wait.png",
				statusTitle: "待商家收货"
			}, {
				icon: "/static/images/order-deliever.png",
				statusTitle: "运输中"
			}, {
				icon: "/static/images/order-deliever.png",
				statusTitle: "商家未发货"
			}];
			this.getInfo(options.order_no);
		},
		methods: {
			//查看大图
			seeBig(e) {
				var index = parseInt(e.currentTarget.dataset.index);
				uni.previewImage({
					current: this.info.reason_info.img_path[index],
					urls: this.info.reason_info.img_path // 需要预览的图片http链接列表

				});
			},

			getInfo(order_no) {
				var that = this;
				getApp().globalData.sendRequest({
					url: "/Customer/order_info",
					type: "post",
					data: {
						order_no
					},
					success: function(res) {
						if (res.status == 1) {
							if (res.bill_info.order_type == 3) {
								uni.setNavigationBarTitle({
									title: '换货详情'
								});
							} else {
								uni.setNavigationBarTitle({
									title: '退款详情'
								});
							}
							/**
							 * status  自定义当前订单状态值
							 * 1.申请中
							 * 2.已撤销申请
							 * 3.驳回申请
							 * 4.申请成功
							 * 5.换货成功
							 * 6.退款中
							 * 7.退款成功
							 * 8.待商家收货
							 * 9.配送中
							 * 10.商家尚未发货
							 */


							var info = res.bill_info;
							var status;
							if (info.refund_status == 1) status = 1;
							if (info.refund_status == 7) status = 2;
							if (info.refund_status == 6) status = 3;
							if (info.refund_status == 3) status = 4;
							if (info.refund_status == 2 && info.order_type == 3) status = 5;
							if (info.refund_status == 5 && info.order_type == 2) status = 6;
							if (info.refund_status == 2 && info.order_type == 2) status = 7;
							if (info.refund_status == 4) status = 8;
							if (info.refund_status == 5 && info.order_type == 3 && info.status == 2) status = 9;
							if (info.refund_status == 5 && info.order_type == 3 && info.status == 1) status = 10;
							that.setData({
								info: info,
								status: status
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				});
			}

		}
	};
</script>
<style>
	@import "./serviceDrawInfo.css";
</style>
